{% extends 'base.html' %}

{% block title %}主页 - SkitPanel 短剧管理面板{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

{% block content %}
<div class="container mx-auto p-4">
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-dark">SkitPanel 短剧管理面板</h1>
            <p class="text-gray-500 mt-1">一站式短剧资源管理与刮削工具</p>
        </div>
        
        <!-- 用户认证信息 -->
        {% if current_user %}
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded mb-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fa fa-user-circle text-blue-500 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-blue-700">
                        欢迎回来，<span class="font-semibold">{{ current_user.username }}</span>！您当前的角色是：
                        {% if current_user.is_admin %}
                            <span class="text-red-600 font-medium">管理员</span>
                        {% else %}
                            <span class="text-green-600 font-medium">普通用户</span>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
        {% endif %}
        
        <div id="config-reminder" class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fa fa-info-circle text-amber-500 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-amber-700">
                        请先前往 <a href="/config" class="text-primary font-medium underline">系统配置</a> 页面完成必要设置，以确保所有功能正常使用。
                    </p>
                </div>
            </div>
        </div>
        
        <!-- 资源统计卡片 -->
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5 transition-all hover:shadow-md">
            <div class="flex justify-between items-start mb-6">
                <h2 class="text-xl font-semibold text-dark">资源统计</h2>
                <button onclick="refreshResourceStats()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                    <i class="fa fa-refresh mr-1"></i> 刷新统计
                </button>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
                <div class="p-4 bg-blue-50 rounded-lg">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-600 font-medium">本地资源数量</span>
                        <i class="fa fa-folder text-blue-500"></i>
                    </div>
                    <div class="text-2xl font-bold text-blue-700" id="local-resources-count">--</div>
                </div>
                
                <div class="p-4 bg-green-50 rounded-lg">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-600 font-medium">飞牛媒体库数量</span>
                        <i class="fa fa-film text-green-500"></i>
                    </div>
                    <div class="text-2xl font-bold text-green-700" id="fnos-libraries-count">--</div>
                </div>
                
                <div class="p-4 bg-purple-50 rounded-lg">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-600 font-medium">Emby媒体库数量</span>
                        <i class="fa fa-film text-purple-500"></i>
                    </div>
                    <div class="text-2xl font-bold text-purple-700" id="emby-libraries-count">--</div>
                </div>
                
                <div class="p-4 bg-orange-50 rounded-lg">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-600 font-medium">QB总任务数</span>
                        <i class="fa fa-download text-orange-500"></i>
                    </div>
                    <div class="text-2xl font-bold text-orange-700" id="qbittorrent-tasks-count">--</div>
                </div>
                
                <div class="p-4 bg-red-50 rounded-lg">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-600 font-medium">TR总任务数</span>
                        <i class="fa fa-download text-red-500"></i>
                    </div>
                    <div class="text-2xl font-bold text-red-700" id="transmission-tasks-count">--</div>
                </div>
            </div>
        </div>
        
        <!-- 系统状态卡片 -->
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5 transition-all hover:shadow-md mt-6">
            <div class="flex justify-between items-start mb-6">
                <h2 class="text-xl font-semibold text-dark">系统组件状态</h2>
                <button onclick="checkAllConnectivity()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                    <i class="fa fa-refresh mr-1"></i> 测试所有组件
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-y-4">
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="douban-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-search text-primary mr-2"></i>
                        豆瓣 Cookie
                    </span>
                    <div class="flex items-center">
                        <span class="flex items-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-1"></i>
                            初始化中...
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="tmdb-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-search text-primary mr-2"></i>
                        TMDB API
                    </span>
                    <div class="flex items-center">
                        <span class="flex items-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-1"></i>
                            初始化中...
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="other-scrape-cookie-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-search text-primary mr-2"></i>
                        其他刮削 Cookie
                    </span>
                    <div class="flex items-center">
                        <span class="flex items-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-1"></i>
                            初始化中...
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="ptskit-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-magnet text-primary mr-2"></i>
                        站点 Cookie
                    </span>
                    <div class="flex items-center">
                        <span class="flex items-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-1"></i>
                            初始化中...
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="local-resource-mapping-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-folder-open text-primary mr-2"></i>
                        本地资源映射
                    </span>
                    <div class="flex items-center">
                        <span class="flex items-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-1"></i>
                            初始化中...
                        </span>
                    </div>
                </div>

                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="tmdb-network-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-globe text-primary mr-2"></i>
                        TMDB网络连通性
                    </span>
                    <div class="flex items-center">
                        <span class="flex items-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-1"></i>
                            初始化中...
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="qbittorrent-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-download text-primary mr-2"></i>
                        qBittorrent连通性
                    </span>
                    <div class="flex items-center">
                        <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">
                            开发中
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="transmission-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-download text-primary mr-2"></i>
                        Transmission连通性
                    </span>
                    <div class="flex items-center">
                        <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">
                            开发中
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="fnos-media-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-film text-primary mr-2"></i>
                        飞牛媒体库连通性
                    </span>
                    <div class="flex items-center">
                        <span class="flex items-center text-gray-500">
                            <i class="fa fa-spinner fa-spin mr-1"></i>
                            开发中
                        </span>
                    </div>
                </div>
                
                <div class="flex justify-between items-center p-3 rounded-lg bg-gray-50" id="emby-connectivity-status">
                    <span class="text-gray-700 flex items-center">
                        <i class="fa fa-film text-primary mr-2"></i>
                        Emby媒体服务器连通性
                    </span>
                    <div class="flex items-center">
                        <span id="emby-status" class="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800">未连接</span>
                    </div>
                </div>
                

                

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% endblock %}